const gulp = require("gulp")
const postcss = require("gulp-postcss")
const autoprefixer = require("autoprefixer")
const sourcemaps = require("gulp-sourcemaps")
const cssnano = require("cssnano")
const rename = require("gulp-rename")
const { series } = require("gulp")
// 安装gulp-sass和sass
const sass = require("gulp-sass")(require("sass"))

const cssvariables = require("postcss-css-variables")

exports.styles = function () {
    return gulp.src("src/*.css")
        .pipe(postcss([autoprefixer]))
        .pipe(sourcemaps.init())
        .pipe(sourcemaps.write("maps/"))
        .pipe(gulp.dest('dest/'))
}
exports.stylrenamees = function () {
    return gulp.src("dest/example.css")
        .pipe(postcss([cssnano]))
        .pipe(rename("example.min.css"))
        .pipe(gulp.dest("dest"))
}
// 使用sass处理scss文件
exports.sass = function () {
    return gulp.src("src/*.scss")
        .pipe(
            sass({ outputStyle: 'compressed' })
                .on('error', sass.logError)
        )
        .pipe(gulp.dest("src/"))
}

exports.autoprefixer = function(){
    return gulp.src("src/*.css")
        .pipe(postcss([autoprefixer,cssnano,cssvariables()]))
        .pipe(gulp.dest("dest/"))
}

// exports.default = series(this.sass, this.styles, this.stylrenamees)
// const watcher = gulp.watch("src/*.scss", () => {
//     this.default()
// })

exports.default = series(
    this.styles,
    this.autoprefixer, 
    this.stylrenamees
)

const watcher = gulp.watch("src/*.css", () => {
    this.default()
})

watcher.on("change", (evt) => {
    console.log(`File chaneg ${evt}`)
})


